<template>
    <el-card style="height: 99.5%">
        <el-tabs type="border-card">
          <el-tab-pane label="IP过滤配置">
            <div style="margin-top: 10px;">
                  <el-tag type="primary" size="large" style="height: 40px;width: 100%;">
                       <span style="font-size: 15px;color: black">当前访问IP：{{ip}}</span>
                  </el-tag>
                  <br>
                  <br>
                  <el-icon><Filter /></el-icon><span style="margin-left: 5px;">IP黑名单</span>
                  <el-tag type="warning" style="margin-left: 10px;"><el-icon><InfoFilled/></el-icon>
                     请仔细确认后再保存, IP配置后立即生效
                  </el-tag>
                  <br>
                  <br>
                  <el-input rows="10"  v-model="urlParams.ip_address" style="width: 100%"  type="textarea" placeholder="请输入IP，多个IP之间请使用英文逗号分割" />
                  <br>
                  <br>
                  <div style="display: flex; justify-content: center;">
                    <el-button type="primary" @click="save">保存</el-button>
                  </div>
            </div>

          </el-tab-pane>
<!--          <el-tab-pane label="Config">Config</el-tab-pane>-->
<!--          <el-tab-pane label="Role">Role</el-tab-pane>-->
          <el-tab-pane label="关于">
              <p style="font-size: 25px;margin-left: 30px;font-weight: bold;">关于</p>
              <p style="font-size: 15px;margin-left: 30px;">devops-web 版本：<el-text class="mx-1" type="primary">1.0</el-text></p>
              <p style="font-size: 15px;margin-left: 30px;">&nbsp&nbspdevops-api 版本：<el-text class="mx-1" type="primary">1.0</el-text></p>
              <p style="font-size: 15px;margin-left: 30px;">&nbsp&nbsp&nbsp&nbspgitee web 地址：<a href="https://gitee.com/lucky_liuzhe/devops_web.git" target="_blank" style="text-decoration: none;color: dodgerblue; font-size: 13px;" >https://gitee.com/lucky_liuzhe/devops_web.git</a></p>
              <p style="font-size: 15px;margin-left: 30px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspgitee api 地址：<a href="https://gitee.com/lucky_liuzhe/devops_api.git" target="_blank" style="text-decoration: none;color: dodgerblue; font-size: 13px;">https://gitee.com/lucky_liuzhe/devops_api.git</a></p>
              <p style="font-size: 15px;margin-left: 123px;">作者：<el-text class="mx-1" type="primary">阿哲</el-text></p>
          </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script>

export default {
      name: 'setting',
      data(){
          return{
              ip: '',
              urlParams: {
                  ip_address: '',
              }
          }
      },
      methods: {
          save(){
                // if (this.urlParams.ip_address == 0) {
                //     this.$message.warning('请输入IP');
                //     return;
                // }
               this.$http.post('/blacklist/',this.urlParams)
                .then(res => {
                    // this.urlParams.ip_address = res.data.ip_list;
                    this.$message.success('保存成功')
                })
                .catch((error)=>{
                 })
            },
           getIP(){
              this.$http.get('/blacklist/')
                .then(res => {
                    this.urlParams.ip_address = res.data.ip_list;
                    this.ip = res.data.ip;
                })
                .catch((error)=>{
                 })
           },
      },
      mounted() {
          this.getIP();
      }
};
</script>

<style scoped>

</style>